How do I create
an object that accepts parameters from the user?
Product:
Dreamweaver
Platform:
All
Versions:
all
ID:
15937
Dreamweaver
empowers you to extend and modify your user interface. One aspect of
extending Dreamweaver includes the ability to add objects to the Objects
panel.
Objects Objects are designed to insert a specific string
of code into your document; they appear on both the Object panel and in
the Insert menu. For each object in an Objects panel category, there are two or
three files in the corresponding folder:
A GIF file
containing an icon for the object.
An HTML file
containing either the HTML to be inserted into your file or an HTML
form that lets you specify data to be inserted (such as text or a
comment).
A
JavaScript file (optional) that generates the HTML to be inserted
into your file.
The Objects
panel contains several categories (including Common, Form, Frames, and so
forth). The categories correspond to folders in the Configuration/Objects
folder within the Dreamweaver application folder.
Adding
simple and complex objects in Dreamweaver Objects can be added a
number of ways, including by installing extensions downloaded from the Macromedia
Exchange. You can also create your own objects, most of which will
fall into a simple or complex category. Simple objects require no
JavaScript; they contain only the HTML source code to be inserted into the
document. For steps to add simple objects, see Creating
a simple custom object (TechNote 15907). The Customizing Dreamweaver
chapter in the manual, Using Dreamweaver, has additional
information about modifying the Objects panel.
You may also
want to create more complex objects. Many complex objects accept input
from the user (such as the name of an anchor when a Named Anchor is
inserted); others trigger the insertion of HTML code specified by the
JavaScript function (such as the Insert Line Break object). The HTML file
for a complex object will have both a
<head> and a <body> tag. For objects
requiring user input, the <body> tag will have a form
to collect the input (such as the number of rows and columns in a table).
The <head> tag will have a call
to the JavaScript file or the JavaScript code itself. This JavaScript code
will either specify the code to be inserted into your document or it will
extract values from the form fields in the HTML file and with these values
assemble a string of HTML to be inserted into your file.
Note: Before attempting to
add complex objects to your Dreamweaver application, you should have
experience with the basic concepts of JavaScript syntax and be thoroughly
familiar with the Extending Dreamweaver documentation. The Extending Dreamweaver manual (in PDF format) , which can
be downloaded for free, contains a chapter specifically devoted to
creating objects.
Often the
easiest way to create a complex object is to open the files for an
existing object (or any extensibility files, such as the files for a
behavior) and save them with different file names. You can then modify the
form fields in the new HTML file and modify the corresponding JavaScript
code. You may have to make many modifications, depending on how much your
new complex object varies from the functionality of the one you've made a
copy of.
Below you'll
find an outline of the basic process involved in creating a complex object
(which receives user input) by modifying an already existing object which
does the same. The steps themselves will not produce a working object, but
you'll become familiar with the main milestones in creating a complex
object.
Creating an object with
a parameters form
1
Opening the files for an existing object and saving new
ones for modification Open an object's HTML file that has a
form. See, for example, Meta.htm in the Configuration/Objects/Head
subfolder in the Dreamweaver application folder.
Note: Do not use
Rollover.htm as an example—the Rollover object is actually a command
which appears to be an object.
2
Choose
File > Save As to save the HTML file with another file name.
If you
want the new object to appear on one of the existing panels, save it
in one of the existing Objects subfolders (Common, Forms, Invisibles
and so forth). If you want to create a new category panel, create a
new folder within the Objects directory and save your file in the
new folder. You can only go one level deep in the Objects folder:
additional subfolders within an Objects subfolder will be ignored by
Dreamweaver. Also, be sure to give your files unique names and not
duplicate the names of other HTML or JavaScript files, even if they
are in different subfolders in the Objects folder.
3
Open the
JavaScript file that corresponds with the HTML file you just opened
(if a corresponding JS file exists) and save it with a new name.
Save this JS file with the same name as the HTML file, but with the
.js extension (and in the same folder you saved your new HTML file
in).
4
Modifying the new HTML file In the HTML file,
switch to Code View or launch the Code Inspector (in the Window
menu). Look in the <head> tag to see if
you find the following code:
If this
code exists, change the source JavaScript file to match the name of
your new JavaScript file.
5
In the
<title> tag, change the
title to reflect the function of your new object. For example, if
your object will insert a particular tag, you could give it the
title, My Tag. (When you mouse
over the icon for this object on the Objects panel, the title will
appear in a pop-up box.)
6
In the body of the
HTML file, create a form that captures parameters for your tag or
tags. For example:
Note: If you need a
Browse button in your parameters form, include the
dreamweaver.browseForFileURL() function, which
is documented in Extending Dreamweaver.
About the
dialog box The minimum size of the dialog box is 200 pixels
by 50 pixels, and the maximum size is 640 pixels by 480 pixels
(unless you use the windowDimensions() function to
explicitly set it larger). The form contents wrap to 200 pixels wide
unless an image or table forces the dialog box wider. Therefore, to
ensure that two items (such as an input field and a Browse button)
remain on the same line, put the line in a table cell with wrapping
disabled, as in the preceding example.
7
Save your changes
to the HTML file.
8
Modifying the JavaScript code In the JavaScript
file, find the function objectTag(). This function
inserts a string of code into the your document.
Replace
the tags in the objectTag() function's return statement
with the tag or tags you want to insert; for example:
return '<MYTAG SRC="">'
Insert the form data into the tags in the objectTag()
function, using JavaScript string concatenation syntax; for example:
(This function may also be in the <head> tag of the HTML
file if a corresponding JavaScript file did not exist for your
object.)
9
Save the
JavaScript file (or the HTML file if the JavaScript code was located
in it).
10
Controlling the placement of the object in the Insert
menu Once you have added an object to a subfolder in the
Objects folder, the object will appear at the bottom of the list on
the Insert menu. To control the position of an object in the Insert
menu or any other menu, or to add an object to multiple menus, you
can modify the menus.xml file. This file controls the entire menu
structure for Dreamweaver. Consult the "About customizing
Dreamweaver menus" section in Using Dreamweaver for more
information about changing menu items.
Note: You should only
edit this file in a text editor (not Dreamweaver) and always save a
copy of the original XML file for backup purposes before making any
changes.
11
Creating an icon for the object on the Objects panel
In Macromedia Fireworks (or another graphics program),
create an 18-pixel by 18-pixel GIF that will serve as the icon for
your object in the Object palette.
Note: If you create a
larger image, Dreamweaver automatically scales it to 18 pixels by 18
pixels. If you do not create an icon for your object, Dreamweaver
inserts a missing image icon in the Object palette.
12
Export the GIF
image into the same folder that you saved your HTML and JavaScript
files. Name the GIF image the exact same name as the HTML file,
except for the .gif extension.
13
Restart
Dreamweaver to use your new object.
Additional
information Objects can be packaged
and distributed on the Macromedia Exchange. For more information, see the
Macromedia Exchange for Dreamweaver site. The Extension
Manager is required to package extensions and is available for download
from the site.
